<template>
     <el-container>
      <el-header style="height: 180px; margin-top:60px">
        <el-avatar ref="avatar" id="id" :size="150" :src="circleUrl" style="margin-left:15vw ;"/>
        <div class="userName" :style="{ left: `${leftOffset}px` } ">  {{userName}}</div>
      </el-header>  
      <el-main style="height: auto;">
        <el-tabs
        v-model="activeName"
        style="margin-left:15vw;"
        class="demo-tabs"
        @tab-click="handleClick"
        stretch
        >
            <el-tab-pane 
            label="喜欢" 
            name="first" 
            style="border: none;">
                <List v-if="store.isLogin" :url="url" :params="likeParams" :key="refreshList"/></el-tab-pane>
            <el-tab-pane 
            label="收藏" 
            name="second" 
            style="border: none;">
                <List  v-if="store.isLogin" :url="url" :params="favParams" :key="refreshList"/></el-tab-pane>
        </el-tabs>
    
      </el-main>
    </el-container>
</template>

<script setup>
import {ref,onMounted,watch} from 'vue'
import List from '@/components/list.vue';
import { useLoginstore } from '@/store/isLogin';
import emiter from '../utils/bus'

const avatar=ref()
const leftOffset=ref(0)
const circleUrl='https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
const activeName=ref('first')

let token=ref()
const refreshList=ref(1)
const store=useLoginstore()
let userName=ref()

const likeParams={
    token:token.value,
    operation:1
}
const favParams={
    token:token.value,
    operation:2
}
function checkLoginStatus(){
    //debugger
    if(window.localStorage.getItem('token'))
    {
        store.$patch({isLogin:true})
        token.value=window.localStorage.getItem('token')
        likeParams.token=token.value
        favParams.token=token.value
        userName.value=window.localStorage.getItem('name')
    }
    else emiter.emit('isShow', true)
}    
checkLoginStatus()

const url='/user/listop'

onMounted(()=>{
    
    avatar.value=document.getElementById('id')  
    // 获取元素距离页面最左侧的宽度
    leftOffset.value = avatar.value.getBoundingClientRect().left+80;    
      
})

</script>
<style>
.userName{
    position: relative;
    bottom: 95px;
    width: auto;
    font-size: 30px;
    color: white;
}
.demo-tabs > .el-tabs__content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  border: none;
}
.list_mian{
    padding-top:0;
}
.el-tabs__item.is-active {
    color: rgb(255, 255, 255)  !important;
}
.el-tabs__active-bar {
    background-color: rgb(228, 231, 237) !important;
}
.el-tabs__item{
    color: rgb(101, 103, 110) !important;
}
</style>